<template>
    <div class="main_auxiliaryLine" v-if="oItem" :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }">
        <div class="wrapper" :style="{
      paddingTop: oItem.main.modulePT + 'px',
      paddingBottom: oItem.main.modulePB + 'px',
      paddingLeft: oItem.main.modulePLR + 'px',
      paddingRight: oItem.main.modulePLR + 'px',

      borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
      borderTopRightRadius: oItem.main.wrapperBTR + 'px',
      borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
      borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
      backgroundColor: oItem.main.wrapperBgColor,
      backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',
    }">
            <div class="content" :style="{
      borderTopLeftRadius: oItem.main.moduleBTR + 'px',
      borderTopRightRadius: oItem.main.moduleBTR + 'px',
      borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
      borderBottomRightRadius: oItem.main.moduleBBR + 'px',
      backgroundColor: oItem.main.moduleBgColor,
      backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
      paddingTop: oItem.main.linePTB + 'px',
      paddingBottom: oItem.main.linePTB + 'px',
      paddingLeft: oItem.main.linePLR + 'px',
      paddingRight: oItem.main.linePLR + 'px',
    }">
                <div class="contentAuxiliaryLine" :style="{
        borderTopColor: oItem.main.lineColor||'transparent',
        borderTopStyle: oItem.main.lineStyle,
        borderTopWidth: oItem.main.lineHeight + 'px',
      }"></div>
            </div>

        </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "auxiliaryLine",
    data() {
        return {
            oItem: null,
            rightIndex: 0,
            catalogIndex: 0,
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            //console.log("auxiliaryLineComponent被通知更新");
            this.oItem = JSON.parse(control);
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.main_auxiliaryLine {
    box-sizing: border-box;
    .wrapper {
        box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        .content {
            box-sizing: border-box;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
            
        }
    }
}
</style>